<template>
  <div class="edit">
    <navbar>
      <div slot="center">编辑信息</div>
    </navbar>
    <div class="tc"></div>
    <div class="uploadfile">
      <van-uploader
        class="uploadfileimg"
        preview-size="100vw"
        :after-read="afterRead"
      />
      <edit left="头像">
        <!-- <img
          class="img"
          :src="model.avatar_url"
          alt=""
          slot="right"
          v-if="model.avatar_url"
        > -->
        <img
          class="img"
          src="@/assets/images/user.png"
          alt=""
          slot="right"
        >
        <!-- v-else -->
      </edit>
    </div>
    <edit
      left="姓名"
      @bannerClick='show = true'
    >
      <a
        href="javascript:;"
        slot="right"
      >{{model.name}}</a>
    </edit>
    <edit left="邮箱">
      <a
        href="javascript:;"
        slot="right"
      >{{model.email}}</a>
    </edit>
    <edit left="电话">
      <a
        href="javascript:;"
        slot="right"
        v-if="model.phone"
      >{{model.phone}}</a>
      <a
        href="javascript:;"
        slot="right"
        v-else
      >暂无</a>
    </edit>

    <div
      class="pwd"
      @click='show1 = true'
    >修改密码</div>

    <van-dialog
      v-model="show"
      title="姓名"
      show-cancel-button
      @confirm="confirmlick"
    >
      <van-field
        v-model="content"
        autofocus
      />
    </van-dialog>
    <van-dialog
      v-model="show1"
      title="密码"
      show-cancel-button
      @confirm="xgpwd"
    >
      <van-field
        v-model="old_password"
        label="旧密码"
        autofocus
      />
      <van-field
        v-model="password"
        label="新密码"
        autofocus
      />
      <van-field
        v-model="password_confirmation"
        label="确定密码"
        autofocus
      />
    </van-dialog>
  </div>
</template>
<script>
import Navbar from 'components/common/navbar/Navbar.vue'
import Edit from '../../components/common/profile/Edit.vue'

import { Userinfo, Upname, Uppwd, Upload } from '../../network/user'

export default {
  data: () => ({
    model: {},
    show: false,
    show1: false,
    content: '',
    old_password: '',
    password: '',
    password_confirmation: ''
  }),
  created() {
    // console.log(
    //   localStorage.getItem('token')
    // );
    this.Userinfo()
  },
  methods: {
    async Userinfo() {
      const res = await Userinfo()
      console.log(res);
      this.model = res
    },
    async afterRead(file) {
      // // console.log(file);
      // const fromdata = new FormData()
      // console.log(file.file.name);
      // fromdata.append('file', file.file)
      // console.log(fromdata);
      // const res = await Upload(file.file)
      // console.log(res);
      this.$toast('不知道怎么写');
    },
    confirmlick() {
      // console.log("用户");
      if (this.content.trim().length < 6) {
        this.$toast('账号长度必须大于6个字段');
        return
      }
      this.model.name = this.content
      this.Upname(this.model.name)
    },
    xgpwd() {
      if (this.old_password.trim().length < 6 || this.password.trim().length < 6 || this.password_confirmation.trim().length < 6) {
        this.$toast('密码长度必须大于6个字段');
        return
      }
      this.Uppwd(this.old_password, this.password, this.password_confirmation)
      // console.log(this.old_password, this.password, this.password_confirmation);
    },
    async Upname(name) {
      // console.log(111);
      const res = await Upname(name)
      // console.log(res);
      if (res.status == 204) {
        this.$toast('姓名修改成功!');
      }
    },
    async Uppwd(old_password, password, password_confirmation) {
      // console.log(111);
      const res = await Uppwd(old_password, password, password_confirmation)
      console.log(res);
      if (res.status == 204) {
        this.$toast('密码修改成功!');
      }
    }
  },
  components: {
    Navbar, Edit
  }
}
</script>
<style lang="less" scoped>
.edit {
  .tc {
    height: 44px;
  }
  .img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .uploadfile {
    position: relative;
    overflow: hidden;
    .uploadfileimg {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .pwd {
    // background-color: #000;
    border: 1px solid #000;
    // border: 1px solid transparent;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    height: 30px;
    line-height: 30px;
  }
}
</style>